<template>
  <el-dialog
      v-model="dialogVisible"
      title="订单评价"
      width="800px"
      :close-on-click-modal="false"
  >
    <div v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="24">
          <div style="margin-bottom: 20px; color: #666; font-size: 14px;">
            请对以下商品进行评价，您的评价将帮助其他用户做出更好的选择
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div v-if="orderItems.length === 0" style="text-align: center; padding: 40px;">
            <el-empty description="暂无可评价的商品"/>
          </div>

          <div v-else>
            <el-card
                v-for="(item) in orderItems"
                :key="item.id"
                style="margin-bottom: 16px;"
                shadow="hover"
            >
              <el-row :gutter="20" align="middle">
                <!-- 商品图片 -->
                <el-col :span="4">
                  <el-image
                      :src="item.image?.url"
                      style="width: 80px; height: 80px; border-radius: 8px;"
                      fit="cover"
                  >
                    <template #error>
                      <div
                          style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #f5f7fa; color: #909399;">
                        <el-icon>
                          <Picture/>
                        </el-icon>
                      </div>
                    </template>
                  </el-image>
                </el-col>

                <!-- 商品信息 -->
                <el-col :span="12">
                  <div style="font-weight: 500; margin-bottom: 8px; line-height: 1.4;">
                    {{ item.name }}
                  </div>
                  <div style="color: #666; font-size: 14px; margin-bottom: 4px;">
                    单价：<span style="color: #f56c6c; font-weight: 500;">¥{{ item.price }}</span>
                  </div>
                  <div style="color: #666; font-size: 14px;">
                    数量：{{ item.count }}
                  </div>
                </el-col>

                <!-- 评价区域 -->
                <el-col :span="8">
                  <!-- 数据库中已评价状态 -->
                  <div v-if="item.reviewId" style="text-align: center;">
                    <div style="margin-bottom: 8px;">
                      <el-rate
                          :model-value="item.rating || 5"
                          :max="5"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}分"
                      />
                    </div>

                    <div
                        style="background: #f5f7fa; padding: 8px; border-radius: 4px; margin-bottom: 8px; font-size: 14px; color: #666; text-align: left; max-height: 60px; overflow-y: auto;">
                      {{ item.content || '用户未留下评价内容' }}
                    </div>

                    <el-tag type="info" size="small">
                      <el-icon style="margin-right: 4px;">
                        <Check/>
                      </el-icon>
                      已评价
                    </el-tag>
                  </div>

                  <!-- 未开始评价状态 -->
                  <div v-else-if="!reviewData[item.id]" style="text-align: center;">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleStartReview(item)"
                    >
                      <el-icon style="margin-right: 4px;">
                        <Star/>
                      </el-icon>
                      评价
                    </el-button>
                  </div>

                  <!-- 评价中状态 -->
                  <div v-else-if="!reviewData[item.id].submitted" style="text-align: center;">
                    <div style="margin-bottom: 8px;">
                      <el-rate
                          v-model="reviewData[item.id].rating"
                          :max="5"
                          show-score
                          text-color="#ff9900"
                          score-template="{value}分"
                      />
                    </div>

                    <el-input
                        v-model="reviewData[item.id].content"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入评价内容..."
                        maxlength="500"
                        show-word-limit
                        style="margin-bottom: 8px;"
                    />

                    <div>
                      <el-button
                          size="small"
                          @click="handleCancelReview(item.id)"
                      >
                        取消
                      </el-button>
                      <el-button
                          type="primary"
                          size="small"
                          :disabled="!reviewData[item.id].content.trim()"
                          @click="handleSubmitReview(item)"
                      >
                        提交评价
                      </el-button>
                    </div>
                  </div>

                  <!-- 本次会话中已评价状态 -->
                  <div v-else style="text-align: center;">
                    <div style="margin-bottom: 8px;">
                      <el-rate
                          :model-value="reviewData[item.id].rating"
                          :max="5"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}分"
                      />
                    </div>

                    <div
                        style="background: #f5f7fa; padding: 8px; border-radius: 4px; margin-bottom: 8px; font-size: 14px; color: #666; text-align: left; max-height: 60px; overflow-y: auto;">
                      {{ reviewData[item.id].content }}
                    </div>

                    <el-tag type="success" size="small">
                      <el-icon style="margin-right: 4px;">
                        <Check/>
                      </el-icon>
                      已评价
                    </el-tag>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <template #footer>
      <div style="text-align: center;">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import {Check, Picture, Star} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import request from '@/utils/request'

const dialogVisible = ref(false)
const loading = ref(false)
const orderItems = ref([])
const reviewData = ref({})

// 暴露给父组件的方法
const open = (items) => {
  orderItems.value = items || []
  reviewData.value = {}
  dialogVisible.value = true
}

// 开始评价某个商品
const handleStartReview = (item) => {
  reviewData.value[item.id] = {
    rating: 5,
    content: '',
    submitted: false
  }
}

// 取消评价
const handleCancelReview = (itemId) => {
  delete reviewData.value[itemId]
}

// 提交单个商品评价
const handleSubmitReview = async (item) => {
  const review = reviewData.value[item.id]
  if (!review.content.trim()) {
    ElMessage.warning('请输入评价内容')
    return
  }

  try {
    loading.value = true
    await request.post('/review', {
      businessId: item.businessId,
      businessType: item.businessType,
      rating: review.rating,
      content: review.content.trim()
    })

    // 标记为已提交，禁用该商品的评价功能
    review.submitted = true
    ElMessage.success('评价提交成功')
  } catch (error) {
    ElMessage.error('评价提交失败，请重试')
  } finally {
    loading.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 暴露方法给父组件
defineExpose({
  open
})
</script>

<style scoped>
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-card__body) {
  padding: 16px;
}

:deep(.el-rate) {
  display: flex;
  justify-content: center;
}

:deep(.el-rate__text) {
  font-size: 12px;
  margin-left: 8px;
}
</style>